<template>
  <div class="productDialog">
    <div class="dialog">
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        append-to-body
        :modal="false"
      >
        <span slot="title" class="dialog-title">{{ dialogTitle }}</span>
        <div class="dialogBody">
          <el-form label-width="110px" :model="formParams" size="mini">
            <el-form-item v-if="dialogTitle == '编辑产品'" label="产品编号">
              <p style="line-height: 0px;">{{ formParams.id }}</p>
            </el-form-item>
            <el-form-item label="产品名称">
              <p v-if="dialogTitle == '编辑产品'" style="line-height: 0px;">{{ formParams.productName }}</p>
              <el-input v-else v-model="formParams.productName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="选择套餐">
              <el-checkbox-group v-model="formParams.packageIds">
                <el-col v-for="(item,index) in allOperPackage" :key="index" :span="6" class="checkbox_col">
                  <el-checkbox :label="item.id">{{ item.packageName }}</el-checkbox>
                </el-col>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="诊疗阶段">
              <el-checkbox-group v-model="formParams.phase">
                <el-col v-for="(item,index) in dict.order_treat_stage" :key="index" :span="6" class="checkbox_col">
                  <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
                </el-col>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="套餐内诊疗建议">
              <el-checkbox-group v-model="formParams.rules">
                <el-col v-for="(item,index) in dict.package_rule" :key="index" :span="6" class="checkbox_col">
                  <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
                </el-col>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="产品图片">
              <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="uploadSuccess"
                :before-upload="beforeUpload"
                accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
                :file-list="fileLists"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="preview" append-to-body :modal="false">
                <img width="100%" :src="previewUrl" alt="" />
              </el-dialog>
            </el-form-item>
            <el-form-item label="产品介绍">
              <el-input v-model="formParams.intro" type="textarea"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="dialogSave">保 存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { add, edit } from '@/api/product';
import { operPackage } from '@/api/order';
import { mapGetters } from 'vuex';
export default {
  components: {},
  dicts: ['order_treat_stage', 'order_sub_stat', 'express_stat', 'sub_order_treat_stage', 'order_pay_flag', 'gender', 'record_stat', 'package_rule'],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    params: {
      type: Object,
      default: function() {
        return {};
      }
    },
    dialogTitle: {
      type: String,
      default: ''
    },
    callback: {
      type: Function,
      default: new Function()
    }
  },
  data() {
    return {
      previewUrl: '',
      preview: false,
      uploadUrl: process.env.VUE_APP_LOG_API + 'api/aliOSS/uploadfile',
      fileLists: [],
      allOperPackage: []
    };
  },
  computed: {
    ...mapGetters(['searchInfo', 'user']),
    formParams() {
      return this.params;
    }
  },
  watch: {
    formParams(newV, oldV) {
      this.fileLists = newV.picturePath ? [{ url: newV.picturePath }] : []; // 图片回显
    }
  },
  mounted() {
    this.getOperPackage();
  },
  methods: {
    // 获取全部套餐
    getOperPackage() {
      operPackage().then(res => {
        this.allOperPackage = res;
      });
    },
    // 新增&编辑&&停用
    dialogSave() {
      let fun = null;
      let text = '';
      const param = JSON.parse(JSON.stringify(this.formParams));
      param.createBy = this.user.id;
      if (this.dialogTitle === '新增产品') {
        fun = add;
        text = '新增成功';
      } else {
        fun = edit;
        text = '编辑成功';
        delete param.id;
        delete param.createDate;
        delete param.phaseList;
        delete param.rulesList;
        delete param.packageIdList;
      }
      fun(param).then(res => {
        this.$notify({
          title: '提示',
          message: text,
          type: 'success',
          duration: 5000
        });
        this.fileLists = [];
        // this.formParams = new InitParam();
        // this.getProductList({ pageIndex: 0, pageSize: 10 });
        this.callback('1');
      });
    },
    // 取消弹框
    dialogClose() {
      this.callback('0');
    },
    // 上传----------------------
    handleRemove(file, fileList) { // 删除文件
      // console.log(file, fileList);
      this.fileLists = fileList;
    },
    handlePictureCardPreview(file) { // 点击图片
      // console.log('aaaaaaa----', file);
      this.previewUrl = file.url;
      this.preview = true;
    },
    uploadSuccess(response, file, fileList) { // 上传成功
      // console.log('上传成功----', response, file, fileList);
      this.fileLists = fileList;
      this.formParams.picturePath = response.data.url;
    },
    beforeUpload(file) { // 上传前
      // console.log('this.fileListsthis.fileLists-----', this.fileLists);
      if (this.fileLists.length > 0) {
        this.$notify({
          title: '提示',
          message: '仅限上传一张图片',
          type: 'warning',
          duration: 5000
        });
        return false;
      }
    }
    // ----------------------------------
  }
};
</script>
<style scoped lang='scss'>
.dialog {
  .dialog-title {
    color: #fff;
  }
}
</style>
